import React, { Component } from 'react'



export default class PropsDemo extends Component {

    constructor() {
        super()
        this.state = {
            nameList: '我是张三',
            sex: '男',
            count: 0
        }

    }


    // setState // 可以是 同步也可以说异步    改变state 只能用setState()

    change(data) {
        let { count } = this.state
        count+=data;
        this.setState({
            count
        })
    }

    change2() {
        console.log(this)

        this.setState({
            count:10
        })

    }


    // 推荐写法
    change3=(aaa)=>{

        this.setState({
            count:++this.state.count
        })
        
    }



    render() {


        let { nameList, sex, count } = this.state  //解构赋值


        return (


            <div>

                <h2> PropsDemo 组件 </h2>

                <div>  {this.state.nameList} </div>
                <div>  {this.state.sex} </div>
                <div>  {nameList} </div>
                <div>  {sex} </div>

                <div>{count}</div>
                {/* 第一种写法 */}
                <button onClick={() => this.change(100)}>点击count ++</button>

                {/* 第二种写法 */}
                <button onClick={this.change2.bind(this)}>点击 change2</button>

                {/* 第三种写法 */}

                <button onClick={this.change3}>点击 change3</button>


            </div>
        )
    }

}